<template>
	<view style="width: 100%;display: flex;flex-direction: column;">
		<view style="width: 100%;display: flex;">
			<view
				style="max-width: 350rpx;min-height: 70rpx; display: flex;flex-wrap: wrap;white-space: pre-wrap;padding: 0rpx 10rpx;border-radius: 8rpx;background: none;align-items: center;">
				<view @click="previewvd" :style="{height,background:'url('+imgSrc+') no-repeat center center/cover'}"
					style="width: 240rpx;display: flex;align-items: center;justify-content: center;background-size: 100%; border-radius: 12rpx;margin-left: 10rpx;border: 5rpx solid white;">
					<image src="/static/images/dlplay.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
				</view>
			</view>
		</view>

		<u-popup mode="center" v-model="show">
			<view style="width: 100%;">
				<video :src="$store.state.common.systemInfo.fileurl + info.content" autoplay></video>
			</view>
		</u-popup>

		<view style="width: 1rpx;height: 1rpx;" :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '@/common/event';
	import moment from 'moment';
	export default {
		data() {
			return {
				show: false,
				actionss: [{
						text: '转发',
					},
					{
						text: '收藏',
					}
				],
				actions: [{
						text: '转发',
					},
					{
						text: '撤回',
					},
					{
						text: '收藏',
					}
				],
				firstFrameSrc: '',
				vsrc: {}, //用于renderjs通信  
				imgSrc: "",
				height: '200rpx'
			}
		},
		mounted() {
			if (moment().valueOf() - this.info.time > 60000) {
				this.actions = [{
						text: '转发',
					},
					{
						text: '收藏',
					},
				]
			}

			if (this.info.timelong > 0 && this.info.money > 0) {
				const bl = (240 * this.info.money) / this.info.timelong
				this.height = Math.floor(bl) + "rpx"
			}


			setTimeout(() => {
				this.setUrl(this.$store.state.common.systemInfo.fileurl + this.info.content)
			}, 300)
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				list: (state) => {

				}
			})
		},
		methods: {
			receiveImg(data) {
				//data.test为返回的封面图  
				console.log("接收到的数据", data);
				if(data && data.test && data.test.includes("data:image/")){
					this.imgSrc = data.test
				}else{
					this.imgSrc = "/static/images/vdbg.jpg"
				}
			},
			//视频封面图  
			setUrl(url) {
				console.log("setUrl触发了", url);
				let options = {};
				options.width = this.info.timelong ?? 300;
				options.height = this.info.money ?? 400;
				options.src = url;
				this.vsrc = options
			},
			getFirstFrame(event) {
				const videoContext = uni.createVideoContext(`myVideo_${this.index}`, this);
				// 获取视频第一帧画面图片
				videoContext.snapshot({
					success: (res) => {
						console.log(res)
						this.firstFrameSrc = res.tempImagePath;
					},
					fail: (err) => {
						console.log('获取视频第一帧失败:', err);
					}
				});
			},
			previewvd: function() {
				const src = this.$store.state.common.systemInfo.fileurl + this.info.content
				this.show = true

			},
			handleLongpress: function(e) {
				console.log(e)
				if (moment().valueOf() - this.info.time > 60000) {
					this.actions = [{
							text: '转发',
						},
						{
							text: '收藏',
						},
					]
				}
			},
			gofriend: function() {
				const list = this.$store.state.friend.list
				const user = this.$store.state.user.user

				const ret = list.find(e => {
					return e.fid == this.info.uid
				})
				if (ret) {
					uni.navigateTo({
						url: "/pages/friend/detail?id=" + this.info.uid
					})
				} else {
					uni.navigateTo({
						url: "/pages/friend/friend?id=" + this.info.uid
					})
				}
			},
			csitemfunc: async function(ex) {
				const e = ex.text
				console.log(e)
				if (e == "转发") {
					uni.navigateTo({
						url: "/pages/friend/sharemessage?id=" + this.info.id
					})
				}
				if (e == "撤回") {
					const ret = await this.$u.delete(`chat/chat/removemessage/${this.info.id}`)
					uni.showToast({
						title: "已撤回",
					})
				}
				if (e == "收藏") {
					const ret = await this.$u.post(`chat/chat/collect`, this.info)
					pub("collect_done", ret.data)
					uni.showToast({
						title: "已收藏"
					})

				}
			},
		}
	}
</script>

<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				test: ""
			}
		},
		methods: {
			//通过视频获得缩略图  
			getVideoImg(newValue, oldValue, ownerInstance, vm) {
				console.log("getVideoImg触发了", JSON.stringify(newValue), newValue.src);
				if (newValue == null || !newValue.src)
					return;
				let that = this;
				// 在缓存中创建video标签  
				let video = document.createElement("VIDEO")
				// 添加一个静音的属性，否则自动播放会有声音  
				// video.setAttribute('muted', true)  
				video.muted = true
				// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图  
				video.autoplay = true;
				//允许跨域访问  
				video.crossOrigin = 'Anonymous';
				// crossOrigin="Anonymous"
				video.src = newValue.src
				// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源 
				video.innerHTML = '<source src=' + newValue.src + ' type="video/mp4">'
				// 再创建canvas画布标签  
				let canvas = document.createElement('canvas');
				let ctx = canvas.getContext('2d');
				// video注册canplay自动播放事件
				setTimeout(function() {
					video.play()
				}, 1000);
				
				let vddatac = false
				// let video = document.getElementById("vvvvv")
				video.addEventListener('canplay', function(e) {
					console.log("canplay事件触发了", e);
					// 创建画布的宽高属性节点，就是图片的大小，单位PX  
					let anw = document.createAttribute("width");
					anw.nodeValue = newValue.width;
					let anh = document.createAttribute("height");
					anh.nodeValue = newValue.height;
					canvas.setAttributeNode(anw);
					canvas.setAttributeNode(anh);
					// 画布渲染  
					ctx.drawImage(video, 0, 0, newValue.width, newValue.height);
					// 生成图片  
					that.test = canvas.toDataURL('image/png') // 这就是封面图片的base64编码  
					// 视频结束播放的事件  
					video.pause()
					// 返回图片的base64编码  
					ownerInstance.callMethod('receiveImg', {
						test: that.test
					})
					vddatac = true
				}, false)
				
				setTimeout(function() {
					if(!vddatac){
						ownerInstance.callMethod('receiveImg', {
							test: ''
						})
					}
				}, 1500);
			},
		}
	}
</script>

<style>
</style>